<template>
    <div>
        <div class="opt-bar">
            <div class="_left">
                <span class="front-sty"></span>
                <slot name="left-bar"></slot>
            </div>
            <div class="_right">
                <slot name="right-bar"></slot>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'OptBar',
    }
</script>

<style scoped lang="less">

  .opt-bar {
    width: 100%;
    height: 20px;
    margin-bottom: 20px;
    margin-right: 10px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    ._left {
      font-size: 16px;
      font-weight: bold;
      display: flex;
      align-items: center;

      .front-sty {
        width: 4px;
        height: 16px;
        background: #D43A3A;
        margin-right: 5px;
      }
    }

    ._right {
      float: right;
    }
  }

</style>
